<template>
	<s-layout title="全部任务" :onShareAppMessage="shareInfo">
		<view class="task-title ss-flex justify-between align-center ss-p-x-20">
			<view class="task-left">您的好友已完成{{ state.num }}单</view>
			<view class="task-right ss-flex justify-center align-center" @click="jump">
				<view class="task-text">好友下单记录</view>
				<uni-icons type="right" size="20" color="#AFAFAF"></uni-icons>
			</view>
		</view>
		<view class="ss-p-x-35 ss-safe-bottom">
				<view class='task-item ss-p-t-20'  v-for="(item, index) in state.list" :key="index">
					<view class="task-item-title">任务{{ item.code }}</view>
					<view class="ss-flex justify-between align-center ss-m-t-25">
						<view class="task-item-left ss-flex-1 ss-m-r-30 ss-line-1">在 {{ item.desc }} 完成1笔订单</view>
						<view class="task-item-share ss-flex align-center" v-if="item.is_finish === 0">
							<view class="task-item-share-1 ss-flex justify-center align-center" @click="go(item)">
								<image class="task-item-share-1-image"
									src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250408/01a440a18fa525cc7be3f96939efebfc.png"
									mode="widthFix"></image>
							</view>
							<button open-type="share"
								class="ss-reset-button  task-item-share-2 ss-flex justify-center align-center"
								@click="share(item)">
								<image class="task-item-share-2-image"
									src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250408/799513519e3a748762e633c6cf7d5f1a.png"
									mode="widthFix"></image>
							</button>
						</view>
						<view class="task-item-right" v-else>已完成</view>
						<view class="task-item-right" v-if="item.is_disabled === 1">未开通店铺</view>
					</view>
				</view>
		</view>
	</s-layout>
</template>

<script setup>
import {
	computed,
	reactive
} from 'vue';
import {
	onLoad
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
	isEmpty
} from 'lodash';

const shareInfo = computed(() => {
	if (isEmpty(state.item)) return {};

	return {
		title: state.item.desc,
		path: `/pages/store/shop?id=${state.item.buy_shop_id}&taskUserId=${state.item.user_id}&price=${state.item.buy_amount}`,
		image: ''
	}
});

const state = reactive({
	list: [],
	num: 0,
	item: null
})

onLoad(() => {
	getData()
})

const share = (item) => {
	state.item = item
}

const getData = async () => {
	const {
		error,
		data
	} = await sheep.$api.store.getStoreList()

	if (error === 0) {
		state.list = data.list
		state.num = data.help_num
	}
}

const jump = () => {
	sheep.$router.go('/pages/store/orderRecords')
}

const go = (item) => {
	console.log(item, 'item');

	if (item.is_finish === 1) {
		return
	}
	uni.navigateTo({
		url: '/pages/store/shop?id=' + item.buy_shop_id + '&taskUserId=' + item.user_id + '&price=' + item.buy_amount
	})
}
</script>

<style scoped lang="scss">
view {
	box-sizing: border-box;
}

.task-title {
	width: 100%;
	height: 60rpx;
	background: linear-gradient(180deg, #FCD3AD 0%, #FFF3E8 100%);

	.task-left {
		font-size: 30rpx;
		font-weight: 500;
		color: #F5782A;
	}

	.task-right {
		.task-text {
			font-size: 30rpx;
			font-weight: 350;
			color: #AFAFAF;
		}
	}
}

.task-item {
	width: 100%;
	height: 170rpx;
	border-bottom: 1rpx solid #E1E1E1;

	.task-item-title {
		font-size: 30rpx;
		font-weight: 350;
		color: #1A1A1A;
	}

	.task-item-left {
		font-size: 30rpx;
		font-weight: 350;
		color: #2F2F2F;
	}

	.task-item-right {
		width: 150rpx;
		height: 60rpx;
		border-radius: 100rpx;
		background: rgba(216, 216, 216, 0);
		border: 1rpx solid #F5782A;
		font-size: 30rpx;
		font-weight: 350;
		line-height: 58rpx;
		text-align: center;
		color: #F5782A;
	}

	.task-item-share {
		width: 150rpx;
		height: 60rpx;
		border-radius: 100rpx;
		background-color: #fff;
		border: 1rpx solid #F5782A;

		.task-item-share-1 {
			width: 80rpx;
			height: 60rpx;
			border-radius: 100rpx;
			background: #F5782A;

			.task-item-share-1-image {
				width: 52rpx;
			}
		}

		.task-item-share-2 {
			flex: 1;
			height: 60rpx;

			.task-item-share-2-image {
				width: 55rpx;
			}
		}
	}
}

.disableds {
	background: #ccc;

	.task-item-right {
		border: 2rpx solid #ccc !important;
	}
}
</style>